<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 俱乐部信息管理</el-breadcrumb-item>
                <el-breadcrumb-item>俱乐部信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="clubDetail" label-width="90px">
                    <el-divider content-position="left">俱乐部logo修改</el-divider>
                    <el-form-item label="俱乐部logo">
                        <el-tooltip content="点击图标上传新logo" placement="top" effect="light">
                            <div class="image-pre">
                                <span class="upload-m">
                                    <i class="el-icon-upload" 
                                       style="color:#ecf0f1;font-size:25px;cursor:pointer;"
                                       @click="uploadLogo"></i>
                                    <input type="file" name="pic" id="logoFile" class="el-upload__input" accept="image/*" 
                                    ref="getfile" @change="getFile">
                                </span>
                                <img :src="file" alt="">
                            </div>
                         </el-tooltip>
                    </el-form-item>
                    <br>
                    <el-divider content-position="left">俱乐部信息修改</el-divider>
                    <el-form-item label="俱乐部状态">
                        <template v-if="clubDetail.status === 0">
                            <i class="el-icon-circle-check" style="color:#1e90ff"> 运营中</i>
                        </template>
                        <template v-if="clubDetail.status === 1">
                            <i class="el-icon-circle-close" style="color:red"> 审查中</i>
                        </template>
                    </el-form-item>
                    <el-form-item label="俱乐部名称">
                        <el-input v-model="clubDetail.clubname" 
                                  @change="newdata.clubname = clubDetail.clubname"></el-input>
                    </el-form-item>
                    <el-form-item label="俱乐部简介">
                        <el-input type="textarea" rows="5" v-model="clubDetail.clubintro"
                                  @change="newdata.clubintro = clubDetail.clubintro"></el-input>
                    </el-form-item>
                    <el-form-item label="俱乐部邮箱">
                        <el-input v-model="clubDetail.clubmail"
                                  @change="newdata.clubmail = clubDetail.clubmail"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="editVisible = true">提交修改</el-button>
                        <!-- <template v-if="Object.keys(newdata).length > 0">
                            <el-button type="primary" @click="editVisible = true">提交修改</el-button>
                        </template>
                        <template v-else>
                            <el-button type="primary" disabled @click="editVisible = true">提交修改</el-button>
                        </template> -->
                        <el-button @click="getData">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        
        <!-- 修改提示框 -->
        <el-dialog title="提示" :visible.sync="editVisible" width="300px" center>
            <div class="del-dialog-cnt">确定修改俱乐部信息？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </span>
        </el-dialog>
        
        </div>
    </div>
</template>

<script>
    export default {
        name: 'clubinfo',
        created() {
          this.getData();  
        },
        data: function(){
            return {
                form: {},
                clubDetail: {},
                file:'',
                newdata: [],
                editVisible: false
            }
        },
        methods: {
            onSubmit() {
                // console.log('object :', JSON.stringify(this.form) === '{}');
                const h = this.$createElement;
                // 插入数据
                let formData = new FormData();
                for(let key in this.newdata){
                    formData.append(key,this.newdata[key])
                }
                if(Object.keys(this.newdata).length != 0 || this.$refs.getfile.files.length!=0){
                    if(this.$refs.getfile.files.length!=0){
                        formData.append('pic', this.$refs.getfile.files[0]);
                    }
                    let config = {headers: {
                            'Content-Type': 'multipart/form-data'
                        }}
                    // TODO: 也要把这里的clubid改一下
                    formData.append('clubid',localStorage.clubid);
                    this.$axios.post('/api/Club/editClub',formData,config).then(res => {
                            this.getData();
                            if(res.data == 1){
                                this.$notify({
                                    type: 'success',
                                    title: '成功',
                                    message: h('p', { style: 'color: #2ecc71;'}, '修改成功！')
                                });
                            }else{
                                this.$notify.error({
                                    title:'错误',
                                    message: h('p', { style: 'color: #eb2f06;'}, '修改失败，请确认文件格式为jpg,png,gif')
                                });
                            }
                        });
                    this.newdata = [];
                } else {
                    this.$notify.error({
                        title:'错误',
                        message: h('p', { style: 'color: #eb2f06;font-weight: 600;'}, '请至少修改一项内容！')
                    });   
                }
                this.editVisible = false;
            },
            getImgBase(){
                var _this = this;
                var file = this.$refs.getfile.files[0];
                var reader = new FileReader(); 
                //转base64
                reader.onload = function(e) {
                    _this.file = e.target.result;
                }
                reader.readAsDataURL(file);
            },
            getData() {
                // TODO: 老规矩，clubid换一下
                this.$axios.get('/api/Club/clubDetail',{
                    params: {
                        clubid: localStorage.clubid
                    }
                }).then(res => {
                    this.clubDetail = res.data;
                    this.file = 'http://localhost/fitness/public/static/img/'+ this.clubDetail.clublogo;
                })
            },
            uploadLogo(){
                document.getElementById('logoFile').click();
            },
            getFile(){
                if(this.$refs.getfile.files.length == 0){
                    this.file = 'http://localhost/fitness/public/static/img/'+ this.clubDetail.clublogo;
                }else{
                    this.file = this.$refs.getfile.files[0];
                    this.getImgBase();                    
                }
            }
        }
    }
</script>

<style scoped>
.image-pre{
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
    
}
.image-pre>.upload-m{
    position: absolute;
    height: 120px;
    width: 120px;
    /* background-color: rgba(82, 82, 82, 0.5); */
    background-color: rgba(94, 78, 78, 0.45);
    transition: 0.5s;
    opacity: 0;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
}

.image-pre>img{
    width: 150px;
    height: auto;
}

.image-pre:hover .upload-m{
    opacity: 1;
}
</style>

